<template>
  <div class="user-info" :class="classObj">
    <div class="u-img">
      <img src="../../assets/image/user.jpg" alt="">
    </div>
    <div class="u-info">
      <div class="u-info-box">
        <div class="base-item">
          <span class="base-item-skew">姓名：
            <span></span>
          </span>
          <span class="base-item-text">刘园园</span>
        </div>
        <div class="base-item">
          <span class="base-item-skew">生日：
            <span></span>
          </span>
          <span class="base-item-text">2000-01-01</span>
        </div>
        <div class="base-item">
          <span class="base-item-skew">邮箱：
            <span></span>
          </span>
          <span class="base-item-text">12312313@qq.com</span>
        </div>
      </div>
    </div>
    <div class="u-info">
      <div class="u-info-box">
        <div class="base-item">
          <span class="base-item-skew">电话：
            <span></span>
          </span>
          <span class="base-item-text">18066589986</span>
        </div>
        <div class="base-item">
          <span class="base-item-skew">学历：
            <span></span>
          </span>
          <span class="base-item-text">本科</span>
        </div>
        <div class="base-item">
          <span class="base-item-skew">地址：
            <span></span>
          </span>
          <span class="base-item-text">陕西,西安</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'userInfo',
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('this.device=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.user-info {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  height: 400px;
  margin: 100px auto 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  .u-img {
    width: 200px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
    overflow: hidden;
    opacity: 0.9;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .u-info {
    width: 400px;
    height: 300px;

    .u-info-box {
      .base-item {
        text-align: left;
        width: 400px;
        display: flex;
        height: 40px;
        margin-bottom: 80px;
        .base-item-skew {
          display: inline-block;
          width: 100px;
          height: 40px;
          padding-left:14px;
          transform: skew(-20deg);
          text-align: center;
          line-height: 40px;
          margin-left: 4px;
          border-radius: 4px;
          letter-spacing: 5px;
          color: #333;
          font-size: 14px;
          background-color: rgba(255, 255, 255, 0.6);
          position: relative;
          span {
            position: absolute;
            display: block;
            border-radius: 50%;
            background: #fff;
            top: 38px;
            left: 0px;
            transform-origin: 100% 0;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8);
            opacity: 0;
            z-index: 2;
            &:after {
              content: "";
              display: block;
              top: 0px;
              left: 0px;
              border: 0px solid #fff;
              border-width: 0px 90px 2px 90px;
              border-width: 0px 90px 2px 90px;
              border-color: transparent transparent transparent
                rgba(255, 255, 255, 0.3);
              transform: rotate(-180deg) translate3d(1px, 3px, 0);
              box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
              transform-origin: 0% 100%;
              animation: shooting-ani 3s infinite ease-out;
            }
          }
        }
        .base-item-text {
          flex: 1;
          line-height: 40px;
          text-align: center;
          letter-spacing: 4px;
          color: #fff;
        }
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      }
      .base-item:hover {
        .base-item-skew {
          span {
            animation: star-ani 3s infinite ease-out;
          }
        }
      }
    }
  }
}
.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: auto;
  margin: 20px auto 20px;
  box-shadow: none;
  .u-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
  }
  .u-info {
    width: 100%;
    height: auto;
    .u-info-box {
      .base-item {
        width: 100%;
        height: 30px;
        margin-bottom: 40px;
         .base-item-skew {
          width:80px;
          height: 30px;
          line-height: 30px;
          margin-left: 4px;
          border-radius: 4px;
          span {
            top: 28px;
          }
        }
        .base-item-text {
          flex: 1;
          line-height: 40px;
          text-align: left;
          padding-left:30px;
          letter-spacing: 4px;
          color: #fff;
        }
      }
    }
  }
}
@keyframes star-ani {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translateX(-100px);
  }
  20% {
    opacity: 0.5;
    transform: scale(1.2) rotate(0) translateX(100px);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) rotate(0) translateX(500px);
  }
}
</style>
